<!DOCTYPE html>
<html lang="en">
<head>
<title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
	jQuery(function($) {

		// Create variables (in this scope) to hold the API and image size
		var jcrop_api, boundx, boundy,

		// Grab some information about the preview pane
		$preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'),

		xsize = $pcnt.width(), ysize = $pcnt.height();

		console.log('init', [ xsize, ysize ]);
		$('#target').Jcrop({
			onChange : updatePreview,
			onSelect : updatePreview,
			aspectRatio : xsize / ysize
		}, function() {
			// Use the API to get the real image size
			var bounds = this.getBounds();
			boundx = bounds[0];
			boundy = bounds[1];
			// Store the API in the jcrop_api variable
			jcrop_api = this;

			// Move the preview into the jcrop container for css positioning
			$preview.appendTo(jcrop_api.ui.holder);
		});

		function updatePreview(c) {
			if (parseInt(c.w) > 0) {
				var rx = xsize / c.w;
				var ry = ysize / c.h;

				$pimg.css({
					width : Math.round(rx * boundx) + 'px',
					height : Math.round(ry * boundy) + 'px',
					marginLeft : '-' + Math.round(rx * c.x) + 'px',
					marginTop : '-' + Math.round(ry * c.y) + 'px'
				});
			}
		}
		;

	});
</script>
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
	display: block;
	position: absolute;
	z-index: 2000;
	top: 10px;
	right: -280px;
	padding: 6px;
	border: 1px rgba(0, 0, 0, .4) solid;
	background-color: white;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
	width: 250px;
	height: 170px;
	overflow: hidden;
}
</style>

</head>
<body>

	<div class="container">
		<div class="row">
			<div class="span12">
				<div class="jc-demo-box">

					<div class="page-header">
						<ul class="breadcrumb first">
							<li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
							<li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
							<li class="active">Aspect Ratio with Preview Pane</li>
						</ul>
						<h1>Aspect Ratio with Preview Pane</h1>
					</div>

					<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />

					<div id="preview-pane">
						<div class="preview-container">
							<img src="demo_files/sago.jpg" class="jcrop-preview"
								alt="Preview" />
						</div>
					</div>

					<div class="description">
						<p>
							<b>An example implementing a preview pane.</b> Obviously the most
							visual demo, the preview pane is accomplished entirely outside of
							Jcrop with a simple jQuery-flavored callback. This type of
							interface could be useful for creating a thumbnail or avatar. The
							onChange event handler is used to update the view in the preview
							pane.
						</p>
					</div>

					<div class="tapmodo-footer">
						<a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
						<div class="segment">
							<b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br /> Jcrop is
							free software released under <a href="../MIT-LICENSE.txt">MIT
								License</a>
						</div>
					</div>

					<div class="clearfix"></div>

				</div>
			</div>
		</div>
	</div>

</body>
</html>

